<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String identity=request.getSession().getAttribute("identity").toString();
    String nickname=request.getSession().getAttribute("nickname").toString();
    String job=null;
    if(identity.equals("teacher")){
        job="老师";
    }else{
        job="同学";
    }

%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加试题</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/add_test.css">
    <script src="lib/vue.js"></script>
    <script src="lib/vue-resource.js"></script>

</head>
<body>
    <div id="app">
        <!--头部-->
        <div class="top">
            <div class="w">
                <div class="top-left">
                    <img src="images/Q-logo.png">
                </div>
                <div class="top-center">
                    <input placeholder="搜索你感兴趣的课程">
                    <button class="iconfont">&#xe63c;</button>
                </div>
                <div class="top-right">
                    <ul>
                        <a href="index.jsp"><li>首页</li></a>
                        <a href="login.jsp"><li>登录注册</li></a>
                        <a href="self.jsp"><li class="current">个人主页</li></a>
                    </ul>
                </div>
            </div>
        </div>

        <div class="top-self" style="background-image: url(images/bg1.jpg); background-size: cover;">
            <div class="w">
                <img class="pro" src="images/pro1.jpg" alt="123"/>
                <div class="text">
                    <h2><%=nickname+job%>，欢迎登录</h2>
                    <h4>构成我们学习最大障碍的是已知的东西，而不是未知的东西。——贝尔纳</h4>
                </div>
                <button class="log_out">退 出 登 录</button>
            </div>
        </div>
        <!--中部-->
        <div class="main">
            <div class="main-top-bar">
                <div class="w">
                    <a href="index.jsp">首页&nbsp>&nbsp</a>
                    <a href="self.jsp">个人中心&nbsp>&nbsp</a>
                    <a href="#" onclick="window.history.back(-1);">视频管理&nbsp>&nbsp</a>
                    <a href="#" class="current">添加试题</a>
                </div>
            </div>
            <div class="test">
                <div class="btn-bar">
                    <div class="level">
                        <span>选择本套试题难度</span>
                        <select v-model="difficulty">
                            <option value="0">A</option>
                            <option value="1">B</option>
                            <option value="2">C</option>
                            <option value="3">D</option>
                            <option value="4">E</option>
                        </select>
                    </div>
                    <button id="add-q" @click="addQuestion">+ 添加单选题</button>
                    <input type="submit" @click="sendQuestions">
                </div>
                <ul id="test">
                    <li class="q" v-for="question,i in questions" :key="i">
                        <div class="q-t">
                            <p>题目</p>
                            <textarea placeholder="输入题目" v-model="question.problem"></textarea>
                            <p>分值</p>
                            <input type="text" class="s" v-model="question.score">
                        </div>
                        <div class="q-op">
                            <p class="p1">选项</p>
                            <p class="p2">正确答案</p>
                            <ul class="clearfix ul">
                                <li v-for="item,i in question.options" :key="i">
                                    <textarea placeholder="输入选项" v-model="item.answer"></textarea>
                                    <input type="radio" class="r" :value="i" v-model="question.checked">
                                </li>
                            </ul>
                        </div>
                        <button class="add-op" @click="addOption(i)">+ 添加选项</button>
                    </li>
                </ul>
            </div>
        </div>

        <!--尾部-->
        <div class="bottom">
            <div class="bottom-board">
                <span>丰富的视频资源帮助学生更好地学习</span>
                <span>基于认知负荷的多少推荐课程</span>
                <span>方案多多，适合每一位学生</span>
            </div>

        </div>
    </div>

    <script>
        window.onload = function () {
            var add_q = $('add-q');
            var test = document.getElementById('test');
            console.log(test);
            var cnt = 0;
        };

        function $(id) {
            return typeof id === "string" ? document.getElementById(id) : null;
        }

        var vm=new Vue({
            el:'#app',
            data:{
                difficulty:0,
                questions:[
                    {
                        problem:'',
                        score:'',
                        checked:'',
                        options:[
                            {
                                answer: '',
                            },
                        ]
                    },
                ]
            },
            methods:{
                addQuestion(){
                    var question={
                        problem:'',
                        score:'',
                        checked:'',
                        options:[
                            {
                                answer:'',
                            }
                        ]
                    };
                    this.questions.push(question);
                },
                addOption(i){
                    var opt={
                        answer:'',
                    };
                    this.questions[i].options.push(opt);
                },
                sendQuestions(){
                    this.$http.post('http://152.136.148.42:8080/College_war_exploded/AddQuestion?lid=<%=request.getParameter("lid")%>&difficulty='+this.difficulty,this.questions)
                        .then(()=>{
                            alert("成功提交信息！");
                        },()=>{
                            alert("提交失败");
                        })
                }
            },
        })
    </script>
</body>
</html>